<template>
  <div class="coupons-lists">
    <el-card class="!border-none" shadow="never">
      <el-form
        ref="formRef"
        class="mb-[-14px]"
        label-width="145px"
        label-position="left"
        style="max-width: 700px"
        :model="formData"
        :rules="formRules"
        :inline="true"
      >
        <el-form-item label="新用户注册" prop="couponAmount">
          <el-input-number
            v-model="formData.couponAmount"
            :max="999"
            :precision="2"
            controls-position="right"
            size="large"
            placeholder="请输入金额"
          />
          <text class="item-tips">元，有效期</text>
        </el-form-item>
        <el-form-item label="" prop="validDate">
          <el-input-number
            v-model="formData.validDate"
            :max="999"
            :precision="2"
            controls-position="right"
            size="large"
            placeholder="请输入有效期"
          />
          <text class="item-tips">天</text>
        </el-form-item>

        <el-form-item label="邀请他人并下单" prop="couponAmount1">
          <el-input-number
            v-model="formData.couponAmount1"
            :max="999"
            :precision="2"
            controls-position="right"
            size="large"
            placeholder="请输入金额"
          />
          <text class="item-tips">元，有效期</text>
        </el-form-item>
        <el-form-item label="" prop="validDate1">
          <el-input-number
            v-model="formData.validDate1"
            :max="999"
            :precision="2"
            controls-position="right"
            size="large"
            placeholder="请输入有效期"
          />
          <text class="item-tips">天</text>
        </el-form-item>
        <el-form-item label="被邀请人下单后" prop="couponAmount2">
          <el-input-number
            v-model="formData.couponAmount2"
            :max="999"
            :precision="2"
            controls-position="right"
            size="large"
            placeholder="请输入有金额"
          />
          <text class="item-tips">元，有效期</text>
        </el-form-item>
        <el-form-item label="" prop="validDate2">
          <el-input-number
            v-model="formData.validDate2"
            :max="999"
            :precision="2"
            controls-position="right"
            size="large"
            placeholder="请输入有效期"
          />
          <text class="item-tips">天</text>
        </el-form-item>
        <el-form-item class="submit-btn">
          <el-button type="primary" @click="submitCoupons">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <div class="mb-4">
        <el-button type="primary" @click="handleAdd()">
          <template #icon>
            <icon name="el-icon-Plus" />
          </template>
          新建
        </el-button>
      </div>
      <el-table size="large" v-loading="pager.loading" :data="pager.lists">
        <el-table-column label="ID" prop="id" min-width="80" />
        <el-table-column label="优惠券名称" prop="couponName" min-width="150" />
        <el-table-column label="状态" prop="status" min-width="80" />
        <el-table-column label="时间范围" min-width="220">
          <template #default="{ row }">
            <view>{{
              `${row.startTimeStr ? row.startTimeStr + "至" : ""}${
                row.endTimeStr || ""
              }`
            }}</view>
          </template>
        </el-table-column>
        <el-table-column label="用户ID" prop="userId" min-width="80" />
        <el-table-column label="用户名称" prop="userName" min-width="120" />
        <el-table-column label="核销订单" prop="useOrderNo" min-width="120" />
        <el-table-column label="优惠金额" prop="couponAmount" min-width="100" />
        <el-table-column
          label="分发时间"
          prop="releaseTimeStr"
          min-width="120"
        />
        <!-- <el-table-column label="核销时间" prop="" min-width="120" /> -->
        <!-- <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button
              v-if="row.pid !== 0"
              type="danger"
              link
              @click="handleDelete(row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="flex justify-end mt-4">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      @success="getLists"
      @close="showEdit = false"
    />
  </div>
</template>
<script lang="ts" setup name="department">
import type { ElTable, FormInstance } from "element-plus";
import EditPopup from "./edit.vue";
import { usePaging } from "@/hooks/usePaging";
import {
  getCouponList,
  setCouponConfig,
  getCouponConfig,
} from "@/api/admin/index";
import feedback from "@/utils/feedback";
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const formRef = shallowRef<FormInstance>();
const isExpand = false;
const loading = ref(false);
const showEdit = ref(false);

const formData = reactive<any>({
  couponAmount: "" as string | number,
  validDate: "" as string | number,
  couponAmount1: "" as string | number,
  validDate1: "" as string | number,
  couponAmount2: "" as string | number,
  validDate2: "" as string | number,
});

const formRules = {
  couponAmount: [
    { required: true, message: "请输入优惠金额", trigger: ["blur"] },
  ],
  validDate: [
    {
      required: true,
      message: "请输入天数",
      trigger: ["blur"],
    },
  ],
  couponAmount1: [
    { required: true, message: "请输入优惠金额", trigger: ["blur"] },
  ],
  validDate1: [
    {
      required: true,
      message: "请输入天数",
      trigger: ["blur"],
    },
  ],
  couponAmount2: [
    {
      required: true,
      message: "请输入优惠金额",
      trigger: ["blur"],
    },
  ],
  validDate2: [
    {
      required: true,
      message: "请输入天数",
      trigger: ["blur"],
    },
  ],
};

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: getCouponList,
  params: {},
});
onActivated(() => {
  getLists();
});

getLists();

const getCouponConfigFun = async () => {
  const res = await getCouponConfig();
  res.map((item: any, index: number) => {
    const attr: string = index ? "couponAmount" + index : "couponAmount";
    const _attr1: string = index ? "validDate" + index : "validDate";
    formData[attr] = item.couponAmount;
    formData[_attr1] = item.validDate;
    console.log("🚀 ~ file: index.vue:221 ~ formData:", formData);
  });
};
getCouponConfigFun();

const submitCoupons = async () => {
  await formRef.value?.validate();
  const {
    couponAmount,
    validDate,
    couponAmount1,
    validDate1,
    couponAmount2,
    validDate2,
  } = formData;
  const params = [
    { type: 1, couponAmount, validDate },
    { type: 2, couponAmount: couponAmount1, validDate: validDate1 },
    { type: 3, couponAmount: couponAmount2, validDate: validDate2 },
  ];
  await setCouponConfig(params);
  feedback.msgSuccess("设置成功");
};

const handleAdd = async (id?: number) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("add");
};

/* onMounted(async () => {
  await getLists();
}); */
</script>

<style lang="scss" scoped>
.coupons-lists {
  .item-tips {
    margin: 0 10px;
  }
  .submit-btn {
    position: absolute;
    top: 30px;
    right: 30px;
  }
  :deep .el-form--inline .el-form-item {
    margin-right: 0;
  }
}
</style>
